<template>
  <div>
    <section id="print">
      <slot name="print"></slot>
    </section>
    <el-dialog
      title="预览打印信息"
      :visible.sync="visible"
      width="30%">
      <slot name="print"></slot>
      <span slot="footer" class="dialog-footer">
        <el-button @click="onCancel" size="small" icon="el-icon-circle-close">取消</el-button>
        <el-button v-print="printObj" size="small" icon="el-icon-printer">打印</el-button>
      </span>
    </el-dialog>
    <el-button size="small" icon="el-icon-view" @click="view">预览</el-button>
  </div>
</template>

<script>
  // 打印组件,插槽名称print
  export default {
    name: "Print",
    data() {
      return {
        visible: false,
        printObj: {
          id: "print",//必填需部分打印输入的ID
          standard: "HTML5",//文档类型，默认是HTML5，可选html5，loose，strict
          popTitle: "",//标题显示标题
          extraCss: "",//附加链接连接，以逗号分隔,如 https://www.google.com,https://www.google.com
          extraHead: '<meta http-equiv="Content-Language" content="zh-cn"/>',//附加在head标签上的其他标签，以逗号分隔
        }
      }
    },
    methods: {
      view() {
        this.visible = true;
      },
      onCancel() {
        this.visible = false;
      },
    }
  }
</script>

<style scoped>

</style>
